<template>
  <!-- 周统计 -->
  <view class="container">
    <view class="header-container">
      <view class="date-range">{{ selectedYear }} | {{ formatDate(currentWeek.start) }}-{{ formatDate(currentWeek.end)
      }}</view>
      <view class="back-current" @click="backToCurrentWeek">回到本周</view>
    </view>

    <view class="month-container" @touchstart="handleTouchStart" @touchmove.prevent @touchend="handleTouchEnd">
      <!-- 遍历 weeksInMonth 数组，渲染每个周标签 -->
      <view v-for="(week, index) in weeksInMonth" :key="index" :style="{ width: `${100 / weeksInMonth.length}%` }"
        :class="{
          'week-tab': true,
          'active': currentWeekIndex === index,
          'current-week-highlight': isCurrentWeek(index)
        }" @click="selectWeek(index)">
        第{{ index + 1 }}周
      </view>
    </view>

    <view class="stats-grid">
      <!-- 遍历 list 数组，渲染每个统计项 -->
      <view v-for="(item, index) in list" :key="index" class="stat-item" @click="ClickViewdetails">
        <text class="stat-value">{{ item.age }}</text>
        <text class="stat-label">{{ item.name }}</text>
      </view>

      <view class="stats-footer">
        统计截止 2025-05-13 08:45
      </view>
    </view>

    <view class="view-detail" @click="ClickViewdetails">查看详情</view>
  </view>
</template>

<script>
export default {
  name: "Monthlystatistics",
  data () {
    return {
      selectedYear: new Date().getFullYear(),
      selectedMonth: new Date().getMonth() + 1,
      currentWeekIndex: 0,
      weeksInMonth: [],
      touchStartX: 0,
      currentWeek: {},
      list: [
        { name: '平均工时(小时)', age: 0 },
        { name: '迟到', age: 0 },
        { name: '早退', age: 0 },
        { name: '缺卡', age: 0 },
        { name: '旷工', age: 0 },
        { name: '外勤', age: 0 },
        { name: '加班', age: 0 },
        { name: '出差', age: 0 },
        { name: '外出', age: 0 },
        { name: '丧假', age: 0 },
        { name: '事假', age: 0 },
        { name: '产假', age: 0 },
        { name: '婚假', age: 0 },
        { name: '年假', age: 0 },
        { name: '病假', age: 0 },
        { name: '陪产假', age: 0 },
      ],
    };
  },
  computed: {},
  created () {
    const today = new Date();
    const currentWeek = this.getWeekForDate(today);
    this.selectedYear = currentWeek.end.getFullYear();
    this.selectedMonth = currentWeek.end.getMonth() + 1;
    this.initWeeks();
    this.updateCurrentWeek();
  },
  methods: {
    getWeekForDate(date) {
      const start = new Date(date);
      start.setDate(date.getDate() - ((date.getDay() + 6) % 7)); // 调整为周一的日期
      const end = new Date(start);
      end.setDate(start.getDate() + 6);
      return { start, end };
    },
    // 查看详情
    ClickViewdetails () {
      const start = this.formatDate(this.currentWeek.start)
      const end = this.formatDate(this.currentWeek.end)
      uni.navigateTo({
        url: `/components/AttcemanntComponent/Personalweeklystatistics/index?
        selectedYear=${this.selectedYear}&
        selectedMonth=${this.selectedMonth}&
        start=${start}&
        end=${end}&
        title=团队周统计`
          .replace(/\s+/g, '') // 移除换行和空格
      });
    },
    initWeeks () {
      this.weeksInMonth = this.getWeeksInMonth(this.selectedYear, this.selectedMonth);
    },
    getWeeksInMonth (year, month) {
      const weeks = [];
      const firstDay = new Date(year, month - 1, 1);
      const lastDay = new Date(year, month, 0);

      let start = new Date(firstDay);
      while (start.getDay() !== 1) {
        start.setDate(start.getDate() - 1);
      }

      do {
        const end = new Date(start);
        end.setDate(end.getDate() + 6);

        if ((start.getMonth() + 1 === month || end.getMonth() + 1 === month) && end <= lastDay) {
          weeks.push({
            start: new Date(start),
            end: new Date(end)
          });
        }

        start.setDate(start.getDate() + 7);
      } while (start <= lastDay);

      return weeks;
    },

    updateCurrentWeek () {
      const today = new Date();
      let found = false;
      this.weeksInMonth.forEach((week, index) => {
        if (today >= week.start && today <= week.end) {
          this.currentWeekIndex = index;
          this.currentWeek = week;
          found = true;
        }
      });
      if (!found && this.weeksInMonth.length > 0) {
        this.currentWeekIndex = 0;
        this.currentWeek = this.weeksInMonth[0];
      }
    },
    formatDate (date) {
      if (!date) return '';
      return `${date.getMonth() + 1}.${date.getDate().toString().padStart(2, '0')}`;
    },

    handleTouchStart (e) {
      this.touchStartX = e.touches[0].clientX;
    },

    handleTouchEnd (e) {
      const diffX = e.changedTouches[0].clientX - this.touchStartX;
      if (Math.abs(diffX) > 50) {
        diffX > 0 ? this.prevMonth() : this.nextMonth();
      }
    },

    prevMonth () {
      if (this.selectedMonth === 1) {
        this.selectedYear--;
        this.selectedMonth = 12;
      } else {
        this.selectedMonth--;
      }
      this.initWeeks();
      this.updateCurrentWeek();
    },

    nextMonth () {
      if (this.selectedMonth === 12) {
        this.selectedYear++;
        this.selectedMonth = 1;
      } else {
        this.selectedMonth++;
      }
      this.initWeeks();
      this.updateCurrentWeek();
    },

    selectWeek (index) {
      this.currentWeekIndex = index;
      this.currentWeek = this.weeksInMonth[index];
    },

    backToCurrentWeek () {
      const today = new Date();
      const currentWeek = this.getWeekForDate(today);
      this.selectedYear = currentWeek.end.getFullYear();
      this.selectedMonth = currentWeek.end.getMonth() + 1;
      // const today = new Date();
      // this.selectedYear = today.getFullYear();
      // this.selectedMonth = today.getMonth() + 1;
      this.initWeeks();
      this.updateCurrentWeek();
    },
    isCurrentWeek (index) {
      const today = new Date();
      return this.weeksInMonth[index] && today >= this.weeksInMonth[index].start && today <= this.weeksInMonth[index].end;
    },
  }
}; 
</script>

<style lang="scss" scoped>
.container {
  margin-top: 10px;
}

.header-container {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  align-items: center;
  margin-bottom: 12px;

  .date-range {
    // font-size: 14px;
    // color: #333;
  }

  .back-current {
    color: #909399;
    font-size: 14px;
  }
}

.month-container {
  height: 60px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  margin: 0 10px;

  .week-tab {
    // font-size: 13px;
    // color: #666;
    text-align: center;
    padding: 8px 0;
    transition: all 0.3s;
    border-bottom: 2px solid transparent;

    &.active {
      color: #1890ff;
      font-weight: bold;
    }

    &.current-week-highlight {
      color: #007aff;
      // background-color: rgba(24, 144, 255, 0.1); // 较浅的高亮颜色 
    }
  }
}

.stats-grid {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #eee;
  padding: 10px 0;
  position: relative;

  .stat-item {
    width: 33.33%;
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    box-sizing: border-box;

    .stat-value {
      font-size: 20px;
      // color: #333;
      margin-bottom: 6px;
    }

    .stat-label {
      font-size: 14px;
      // color: #666;
      text-align: center;
      line-height: 1.4;
    }
  }

  .stats-footer {
    width: 100%;
    text-align: left;
    padding: 5rpx 0rpx 10rpx 9rpx;
    color: #999;
    font-size: 0.75rem;
    margin-top: 0.625rem;
  }
}

.view-detail {
  padding: 16px 0;
  font-size: 14px;
  color: #909399;
  text-align: center;
}
</style>